<template>
  <!--主体-->
  <div style="padding: 10px">
      <!--搜索区域-->
      <div style="margin: 10px 0">
        <el-input v-model="search" placeholder="请输入关键字" style="width: 20%;" clearable/>
        <el-button type="primary" style="margin-left: 10px" @click="load">查询</el-button>
      </div>
      <el-table :data="tableData" border stripe style="width: 100%">
        <el-table-column prop="id" label="ID" sortable/>
        <el-table-column prop="goodsName" label="商品名"/>
        <el-table-column label="图片">
          <template #default="scope">
            <div class="demo-image__preview">
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.image1"
                :preview-src-list="srcList"
                fit="cover"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型"/>
        <el-table-column prop="description" label="描述"/>
        <el-table-column prop="price" label="价格"/>
        <el-table-column label="状态">
        <template #default="scope">
          <el-button type="success" plain v-if="scope.row.status===0" size="small">
            在售
          </el-button>
          <el-button type="success" plain v-if="scope.row.status===1" size="small">
            已下单
          </el-button>
          <el-button type="success" plain v-if="scope.row.status===2" size="small">
            已付款
          </el-button>
          <el-button type="success" plain v-if="scope.row.status===3" size="small">
            已发货
          </el-button>
          <el-button type="success" plain v-if="scope.row.status===4" size="small">
            已签收
          </el-button>
        </template>
      </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleEdit(scope.row)"
            >确认收货
            </el-button
            >
            <el-popconfirm title="确认要退款吗?" @confirm="handleDelete(scope.row.id)">
              <template #reference>
                <el-button link type="primary" size="small">退款</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
  
      <div style="margin: 10px 0">
  <!--      <div class="demo-pagination-block">-->
          <el-pagination
                  v-model:currentPage="currentPage"
                  v-model:page-size="pageSize"
                  :page-sizes="[5, 10, 20]"
                  :small="small"
                  :disabled="disabled"
                  :background="background"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange">
          </el-pagination>
  
      </div>
    </div>
  </template>
  
  <script>
  import request from "../utils/request";
  
  export default {
  
    name: 'HomeView',
    components: {
    },
    data() {
      return {
        form: {},
        dialogVisible: false,
        search: '',
        total: 0,
        currentPage: 1,
        pageSize: 10,
        tableData: [
          
        ]
      }
    },
    created() {
      this.load()
    },
    methods: {
      handleAvatarSuccess(res) {
        this.form.image1 = res.data
        this.$message.success("上传成功")
        // this.update()
      },
      load() {
        request.get("/goods/buyList", {
          headers:{
            'token':sessionStorage.getItem("token")
          },
          params: {
            pageNum: this.currentPage,
            pageSize: this.pageSize,
            search: this.search
          }
        }).then(res => {
          console.log(res);
          this.tableData = res.data.records
          this.total = res.data.total
        })
      },
      save: function(){
          request.post("/goods/publish", this.form, {
            headers:{
              'token':sessionStorage.getItem("token")
            },
            
          }).then(res => {
            console.log(res);
            //判断操作
            if(res.code === 200 ) {
              this.$message({
                type: "success",
                message: "更新成功"
              })
            }else {
              this.$message({
                type: "error",
                message: res.msg
              })
            }
            this.load();
            this.dialogVisible = false;
          });
      },
      add: function(){
        this.dialogVisible = true;
        this.form = {}
      },
      handleEdit(row) {
        this.form = JSON.parse(JSON.stringify(row));
        this.dialogVisible = true
      },
      handleSizeChange: function (pageSize) { //改变每页大小时触发
        this.pageSize = pageSize;
        this.load()
      },
      handleCurrentChange: function (pageNum) {  //改变当前页数时触发
        this.currentPage = pageNum;
        this.load()
      },
      handleDelete(id){
        console.log((id))
        request.delete("/user/" + id).then(res => {
          // 操作判断
          if(res.code === 200) {
            this.$message({
              type: "success",
              message: "删除成功"
            })
          }else {
            this.$message({
              type: "error",
              message: res.msg
            })
          }
          this.load();  //重新加载表格
        })
      }
    }
  }
  </script>
  
  <style>
  .demo-image__error .image-slot {
    font-size: 30px;
  }
  .demo-image__error .image-slot .el-icon {
    font-size: 30px;
  }
  .demo-image__error .el-image {
    width: 100%;
    height: 200px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  </style>